<template>
	<view class="ys">
		<view class="navlist">
			<view class="navitem">
				<uni-datetime-picker type="date" :value="time" @change="change" :clear-icon="false" />
			</view>
			<!-- <view class="navitem">
				<uni-data-select v-model="group_id" :localdata="staffRole" @change="changeRole"
					:clear="false"></uni-data-select>
			</view> -->
			<view class="navitem">
				<uni-data-select v-model="sign_type" :localdata="signTypeArray" @change="changeSignType"
					:clear="false"></uni-data-select>
			</view>
		</view>
		<view class="empty_data" v-if="list.length == 0">
			暂无数据
		</view>
		<view class="list" v-for="(item,index) in list" :key="index">
			<view class="item">
				<view class="imgbox" :style="{backgroundImage:`url(${item.staff.avatar_path || siteConf.logo})`}">
				</view>
				<view class="info">
					<view class="name">
						名字 : {{item.staff.name}}
					</view>
					<view class="phone">
						组别 : {{item.staff.group_name || '未设置'}}
					</view>
					<view class="phone">
						身份 : {{item.staff.role.text || '未填'}}
					</view>
					<view class="phone">
						地址 : {{item.sign_address || '获取失败'}}
					</view>
					<view class="signtime">
						时间 : {{item.sign_time}}
						<button @click="showImg(item)">查看图片</button>
					</view>
				</view>
				<view class="index">
					{{index+1}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		UserInfo
	} from '@/api/api.js'
	import {
		getStaffSign,
		getGroupSignList
	} from "@/api/staff.js"
	import {
		getStaffSignList
	} from "@/api/user.js"
	export default {
		data() {
			return {
				list: [],
				page: 1,
				last_page: 1,
				is_store: false,
				is_staff: false,
				time: '',
				group_id: 2,
				groupRange: [],
				type: '',
				sign_type: 1,
				signTypeArray: [{
					text: '签到',
					value: 1
				}, {
					text: "签退",
					value: 2
				}]
			}
		},
		onLoad(e) {
			console.log('son', this.staffRole);
			var date = new Date(),
				year = date.getFullYear(),
				month = date.getMonth() + 1,
				day = date.getDate();
			month >= 1 && month <= 9 ? (month = "0" + month) : "";
			day >= 0 && day <= 9 ? (day = "0" + day) : "";
			this.time = year + '-' + month + '-' + day;
			if (e.type) {
				this.type = e.type
			}
			this.getSignList()
		},
		methods: {
			change(e) {
				this.list = []
				this.page = 1
				this.time = e
				this.getSignList()
			},
			// changeRole(e) {
			// 	this.list = []
			// 	this.page = 1
			// 	this.group_id = e
			// 	this.getSignList()
			// },
			changeSignType(e) {
				this.list = []
				this.page = 1
				this.sign_type = e
				this.getSignList()
			},
			UserInfo() {
				UserInfo().then(res => {
					if (res.code == 0) {
						let data = res.data
						this.is_store = data.is_store
						this.is_staff = data.is_staff
						this.getSignList()
					}
				})
			},
			getSignList() {
				if (this.type == 'leader') {
					//管家查看店内成员签到记录
					getStaffSign({
						page: this.page,
						role: this.group_id,
						date: this.time,
						type: this.sign_type
					}).then(res => {
						if (res.code == 0) {
							this.list = res.data
						} else {
							uni.$showMsg(res.msg)
						}
					})
				} else if (this.type == 'group') {
					//组内成员签到记录
					getGroupSignList({
						page: this.page,
						role: this.group_id,
						date: this.time,
						type: this.sign_type
					}).then(res => {
						if (res.code == 0) {
							this.list = res.data
						} else {
							uni.$showMsg(res.msg)
						}
					})
				} else {
					//店长看签到记录
					getStaffSignList({
						page: this.page,
						role: this.group_id,
						date: this.time,
						type: this.sign_type
					}).then(res => {
						if (res.code == 0) {
							this.list = res.data
						} else {
							uni.$showMsg(res.msg)
						}
					})
				}
			},

			showImg(item) {
				uni.previewImage({
					urls: [item.sign_path]
				})
			}
		}
	}
</script>

<style lang="scss">
	.empty_data {
		text-align: center;
		margin-top: 20%;
	}

	.navlist {
		display: flex;
		align-items: center;
		position: sticky;
		top: 0;
		/* #ifdef H5 */
		top: 44px;

		/* #endif */
		.navitem {
			flex: 1;
		}
	}

	.list {
		padding: 5px 10px;
		box-sizing: border-box;

		.item {
			background: #fff;
			border-radius: 6px;
			padding: 10px;
			box-sizing: border-box;
			width: 100%;
			box-shadow: 0 0 5px #eee;
			display: flex;
			align-items: center;

			.imgbox {
				width: 75px;
				height: 75px;
				background-size: 100% 100%;
				border-radius: 5px;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.index {
				width: 40px;
				text-align: center;
				font-weight: bold;
				font-size: 32px;
				color: #9a7fea;
			}

			.info {
				width: calc(100% - 105px);
				padding-left: 10px;
				box-sizing: border-box;
			}

			.title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 14px;
				padding-bottom: 10px;
				border-bottom: 1px solid #eee;

				.id {
					font-weight: bold;
				}

				.tips {
					font-size: 12px;
				}
			}

			.type {
				padding: 10px 0;
			}

			.phone {
				font-size: 14px;
				margin-top: 4px;


			}

			.signtime {
				font-size: 14px;
				margin-top: 6px;
				display: flex;
				align-items: center;

				button {
					font-size: 12px;
					margin: 0 0 0 10px;
					padding: 0 10px;
					background: #9a7fea;
					color: #fff;
					line-height: 25px;
				}
			}

			.time {
				padding-bottom: 10px;
				color: #777;
				font-size: 12px;
			}

			.btns {
				display: flex;
				justify-content: flex-end;
				border-top: 1px solid #eee;
				padding-top: 10px;

				button {
					font-size: 12px;
					margin: 0;
					padding: 0;
					width: 60px;
					background: $uni-bg-color;
					color: #fff;
				}
			}
		}
	}
</style>